import React, { useState } from 'react';
import './App.css';
import Header from './components/Header';
import List  from './components/List'
import Footer from './components/Footer';
import { nanoid } from 'nanoid'

export default function App() {
    const [todoList,setTodoList] = useState([
        { id:  nanoid(), todo: "唱", done: false },
        { id:  nanoid(), todo: "跳", done: false },
        { id:  nanoid(), todo: "rap", done: false },
    ])
  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <Header setTodoList={setTodoList} todoList={todoList}/>
        <List todoList={todoList} setTodoList={setTodoList}/>
        <Footer />
      </div>
    </div>
  )
}

